<template>
  <div>
    <!-- 
        v-text => 代替了webapi中的innerText
    
        v-html => 代替了webapi中的innerHTML
    
        观察发现，v-text 使用时不允许当前标签内有任何子元素
        原因：本来当前元素中的内容就会被v-text中的内容覆盖，所以当前标签中的子元素显得毫无意义，甚至影响页面的渲染效率
    -->
    <p v-text="text"></p>
    <p v-html="text"></p>
  </div>
</template>

<script>
    export default {
      name: 'DemoIndex6',
      data() {
        return {
          text: '<span style="color: red">这是一个字符串</span>'
        }
      },
    }
</script>

<style>

</style>